<template>

  <vxe-button
    style="margin-right: 10px;"

    icon="fa  fa-map-marker" title="编辑地址" circle @click="showModal()"></vxe-button>

  <!-- 模态框部分-表单   -->
  <vxe-modal v-model="flagCollection.visibleFlag"
             id="addrModal"
             width="1000"
             title="操作"
             :lock-view="false" :mask="false"
             show-footer show-zoom resize remember storage transfer dblclickZoom
             :destroy-on-close="true"
             @confirm="okFn"
             @cancel="cancelFn">
    <!--表单-->
    <a-row :gutter="16">
      <a-col :md="15" :sm="16" :xs="16">
        <ele-map-picker
          v-model:visible="flagCollection.showPickerFlag"
          :need-city="true"
          :search-type="1"
          @done="onChooseFn"/>
      </a-col>
      <a-col :md="9" :sm="8" :xs="8">
        <a-card title="编辑地址">
          <a-form :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol" labelAlign="right"
          >
            <a-form-item label="地址简称">
              <a-input v-model:value="formData.addressAbbreviation" placeholder=""/>
            </a-form-item>
            <a-form-item label="地址类别">
              <a-input v-model:value="formData.addressType"  readonly/>

            </a-form-item>
            <!--   业务id           -->
            <a-input v-model:value="formData.businessID" type="hidden"/>
            <!--    省市区三级联动        -->
            <a-form-item label="请选择省市区">
              <a-cascader
                v-model:value="formData.cityValue"
                :options="cityData.cityData"
                placeholder="请选择省市区"
                popup-class-name="ele-pop-wrap-higher"/>
            </a-form-item>
            <a-form-item label="街道地址">
              <a-textarea v-model:value="formData.streetAddress"/>


            </a-form-item>
            <a-form-item label="详细地址" :rows="6">
              <a-textarea v-model:value="formData.detailedAddress"/>
            </a-form-item>
            <!-- 经度纬度隐藏域  lon 经度 lat维度 -->
            <a-input type="hidden" v-model:value="formData.addressLongitude"></a-input>
            <a-input type="hidden" v-model:value="formData.addressLatitude"></a-input>
            <a-form-item label="邮编">
              <a-input v-model:value="formData.zipCode">
              </a-input>
            </a-form-item>
          </a-form>
        </a-card>

      </a-col>
    </a-row>
  </vxe-modal>

</template>
<script>
//导入地图相关
//inject
import EleMapPicker from 'ele-admin-pro/packages/ele-map-picker';
import {defineComponent} from 'vue';
import AddrMapEdit from '../../../MAddrEdit/js/index.js';


export default defineComponent({
  name: 'AddrButton',
  components: {
    EleMapPicker,
  },
  props: {
    AddressEntityData: {
      type: Object,
    },
    AddressStatus: {
      type: String,
      default: () => {
        return '停用';
      }
    },
    AddressType: String
  },
  emits: ['addrChange'],
  setup(props, context) {
      // console.log("AddressEntity",props.AddressEntityData)
    const {
      cityData,
      cityStr,
      dict,
      flagCollection,
      tempAddressEntityData,
      tempAddressStatus,
      detailedAddress,
      formData,
      locationData,
      labelCol,
      wrapperCol,
      showModal,
      okFn,
      cancelFn,
      onChooseFn,
    } = AddrMapEdit(props, context);

    labelCol.span = 8
    wrapperCol.span = 16


    return {
      cityData,
      cityStr,
      dict,
      flagCollection,
      tempAddressEntityData,
      tempAddressStatus,
      detailedAddress,
      formData,
      locationData,
      labelCol,
      wrapperCol,
      showModal,
      okFn,
      cancelFn,
      onChooseFn,
    }
  }


})
</script>
<style scoped>
.ant-card {
  height: 557px;
}


.ant-modal {
  max-width: 100%;
  top: 0;
  padding-bottom: 0;
  margin: 0;
}

.ant-modal-content {
  display: flex;
  flex-direction: column;
  height: calc(100vh);
}

.ant-modal-body {
  flex: 1;
}

.addressType-text{
  text-align: center;
}
</style>
